<script setup lang="ts">
import { useFullscreen } from '@vueuse/core'

defineOptions({ name: 'FullScreen' })

const { isFullscreen, toggle } = useFullscreen()
const theme = useThemeStore()
</script>

<template>
  <hover-container
    class="w-[40px] h-full"
    tooltip-content="全屏"
    :inverted="theme.header.inverted"
    @click="toggle"
  >
    <icon-off-screen v-if="isFullscreen" class="text-lg" />
    <icon-full-screen-one v-else class="text-lg" />
  </hover-container>
</template>

<style lang="scss"></style>
